<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Workout Buddy</title>
<link href="
https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
/* Global Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Default light mode */
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f4f4f4;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
color: #000;
}
/* Dark mode styles */
body.dark-mode {
background-color: #333;
color: #fff;
}
/* Navbar Styling */
.navbar {
background-color: white !important; /* White background */
padding: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.navbar-nav {
display: flex;
flex-wrap: wrap;
}
.navbar-brand, .nav-link {
color: #000 !important; /* Black text color */
}
.navbar-nav .nav-link:hover {
color: #ff0000 !important; /* Red on hover */
}
/* Toggle button */
.theme-toggle-btn {
background-color: transparent;
border: 2px solid #007BFF;
color: #007BFF;
padding: 10px;
font-size: 1rem;
border-radius: 5px;
cursor: pointer;
margin-left: 20px;
}
.theme-toggle-btn:hover {
background-color: #007BFF;
color: white;
}
/* Dropdown Styling */
.dropdown-menu {
background-color: red !important; /* Red background */
border-radius: 8px;
border: none;
}
.dropdown-item {
color: white !important; /* White text */
}
.dropdown-item:hover {
background-color: darkred !important; /* Dark red on hover */
color: #ffd700 !important; /* Gold on hover */
}
/* Center Login Form */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full viewport height */
}
.login-container {
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
text-align: center;
width: 100%;
max-width: 400px; /* Ensures a good size on all screens */
}
h2 {
margin-bottom: 20px;
}
label {
font-size: 14px;
margin-bottom: 5px;
display: block;
}
/* Improve Input Fields */
input[type="text"], input[type="password"] {
width: 100%;
padding: 12px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
}
/* Timer Section Styling */
#timer-section {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
width: 300px;
margin: 50px auto;
}
#timer-display {
font-size: 3rem;
font-weight: bold;
color: #007BFF;
margin-bottom: 20px;
}
button {
background: #007BFF;
color: white;
border: none;
padding: 10px 20px;
font-size: 1rem;
margin: 5px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background: #0056b3;
}
/* Button Styling */
button {
width: 100%;
padding: 12px;
background: #007bff;
color: white;
cursor: pointer;
border: none;
border-radius: 5px;
font-size: 18px;
}
button:hover {
background: #0056b3;
}
/* Forgot Password */
.forgot-password {
margin-top: 10px;
}
.forgot-password a {
color: #007bff;
text-decoration: none;
}
.forgot-password a:hover {
text-decoration: underline;
}
/* Photo Container */
.photo-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 20px;
padding: 20px;
}
.photo-container .box {
background: #fff;
border: 5px solid #333;
padding: 20px;
width: calc(33.33% - 40px);
text-align: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.photo-container .box img {
width: 100%;
height: auto;
}
/* Workout Plan */
.workout-plan {
padding: 20px;
max-width: 100%;
overflow: hidden;
}
.workout-plan h2 {
color: #007BFF;
}
.workout-plan-details {
display: none;
background: #fff;
padding: 20px;
margin-top: 30px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
/* Footer */
.footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 10px;
}
</style>
</head>
<body>
<!-- Login Form -->
<div class="container mt-5 pt-5">
<div class="login-container" id="login-container">
<h2>Login</h2>
<form id="login-form">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<button type="submit">Log In</button>
<div class="forgot-password">
<a href="#">Forgot password?</a>
</div>
</form>
</div>
</div>
<!-- Navbar (Hidden initially) -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top d-none">
<div class="container-fluid">
<!-- Brand -->
<a class="navbar-brand" href="#">
<img src="
https://files.oaiusercontent.com/file-KjXQUqygzWkSbjo9VRUXeE?se=2025-03-11T04%3A23%3A07Z&sp=r&sv=2024-08-04&sr=b&rscc=max-age%3D604800%2C%20immutable%2C%20private&rscd=attachment%3B%20filename%3D63b406cb-1f31-4e53-93d1-8b3a29b54bd5.webp&sig=/nsIBYYpwaxCqIzLzHfcTaRypunmnwi8kky/zU8w%2BT4%3D" alt="Workout Buddy Logo" width="40" height="40" class="d-inline-block align-text-top">
Workout Buddy
</a>
<!-- Mobile Menu Button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar Links -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#" id="timer-btn">Timer</a></li>
<li class="nav-item"><a class="nav-link" href="#">Music</a></li>
<li class="nav-item"><a class="nav-link" href="#">Logging Out</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<!-- Dropdown for Timer and Exercises -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="menuDropdown" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
MENU
</a>
<ul class="dropdown-menu" aria-labelledby="menuDropdown">
<li><a class="dropdown-item" href="#" id="exercise-btn">Exercises</a></li>
<li><a class="dropdown-item" href="#" id="workout-btn">Workouts</a></li>
<li><a class="dropdown-item" href="#">Health</a></li>
<li><a class="dropdown-item" href="#">VitalEats</a></li>
</ul>
</li>
</ul>
</div>
<!-- Theme Toggle Button -->
<button class="theme-toggle-btn" id="theme-toggle"> Dark Mode</button>
</div> <!-- Remove this extra closing div -->
</nav>
<!-- Timer Section (Hidden Initially) -->
<div id="timer-section" style="display: none; text-align: center; padding: 20px;">
<h2>Workout Timer</h2>
<p id="timer-display" style="font-size: 2rem; font-weight: bold;">00:00</p>
<button id="start-btn">Start</button>
<button id="stop-btn">Stop</button>
<button id="reset-btn">Reset</button>
</div>
<!-- Exercises Section -->
<div id="exercise-section" style="display: none;">
<div class="exercise-title">Exercises</div>
<div class="photo-container">
<div class="box">
<img src="
https://homeworkouts.org/wp-content/uploads/anim-push-ups.gif" alt="Push-up">
<div class="description">Push-up: Strengthens upper body.</div>
</div>
<div class="box">
<img src="
https://homeworkouts.org/wp-content/uploads/anim-sit-ups.gif" alt="Sit-up">
<div class="description">Sit-up: Targets the core muscles.</div>
</div>
<div class="box">
<img src="
https://www.inspireusafoundation.org/wp-content/uploads/2022/08/chain-sumo-squat.gif" alt="Squat">
<div class="description">Squats: Builds lower body strength.</div>
</div>
<div class="box">
<img src="
https://fitnessprogramer.com/wp-content/uploads/2021/02/plank.gif" alt="Plank">
<div class="description">Plank: Strengthens core and back.</div>
</div>
<div class="box">
<img src="
https://fitnessprogramer.com/wp-content/uploads/2021/08/High-Knee-Run.gif" alt="High Knees">
<div class="description">High Knees: Great for cardio.</div>
</div>
<div class="box">
<img src="
https://i.ytimg.com/vi/uckYc_gtyf8/maxresdefault.jpg" alt="Mountain Climbers">
<div class="description">Mountain Climbers: Full-body workout.</div>
</div>
</div>
</div>
<!-- Workout Plans Section -->
<div id="workout-section" style="display: none;">
<div class="container">
<h1 style="color: white;">Choose Your Workout Plan</h1>
<div class="workout-plan-buttons">
<button onclick="showWorkout('morning')">Morning Workout</button>
<button onclick="showWorkout('daily')">Daily Workout</button>
<button onclick="showWorkout('sevenDays')">7 Days Workout</button>
</div>
<div id="workoutDetails" class="workout-plan-details" style="display:none;">
<h2 id="workoutTitle"></h2>
<p id="workoutDescription"></p>
<ul id="exercises"></ul>
</div>
</div>
</div>
<!-- Bootstrap JS (Fixed Syntax) -->
<script src="
https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JavaScript -->
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM fully loaded and script running...");
// Show navbar after login
const loginForm = document.getElementById('login-form');
const loginContainer = document.getElementById('login-container');
const navbar = document.querySelector('.navbar')
const exerciseSection = document.getElementById('exercise-section');
const workoutSection = document.getElementById('workout-section');
const exerciseBtn = document.getElementById('exercise-btn');
const workoutBtn = document.getElementById('workout-btn');
const validUsername = "group 4";
const validPassword = "webdeveloper";
if (!loginForm) {
console.error("Login form not found!");
return;
}
loginForm.addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value.trim();
if (username === "group 4" && password === "webdeveloper") {
console.log("Login successful!");
loginContainer.style.display = 'none'; // Hide login form
navbar.classList.remove('d-none'); // Show navbar
} else {
alert("Invalid username or password!");
}
});
if (exerciseBtn) {
exerciseBtn.addEventListener('click', function() {
exerciseSection.style.display = "block";
workoutSection.style.display = "none";
});
}
if (workoutBtn) {
workoutBtn.addEventListener('click', function() {
workoutSection.style.display = "block";
exerciseSection.style.display = "none";
});
}
});
let timer;
let seconds = 0;
let isRunning = false;
// Function to format time as MM:SS
function formatTime(sec) {
let minutes = Math.floor(sec / 60);
let seconds = sec % 60;
return
${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')};
}
// Function to update display
function updateDisplay() {
document.getElementById('timer-display').textContent = formatTime(seconds);
}
// Start Timer
document.getElementById('start-btn').addEventListener('click', function () {
if (!isRunning) {
isRunning = true;
timer = setInterval(() => {
seconds++;
updateDisplay();
}, 1000);
}
});
// Stop Timer
document.getElementById('stop-btn').addEventListener('click', function () {
clearInterval(timer);
isRunning = false;
});
// Reset Timer
document.getElementById('reset-btn').addEventListener('click', function () {
clearInterval(timer);
isRunning = false;
seconds = 0;
updateDisplay();
});
// Show Timer Section when clicking "Timer" in Navbar
document.getElementById('timer-btn').addEventListener('click', function () {
document.getElementById('timer-section').style.display = "block";
document.getElementById('exercise-section').style.display = "none";
document.getElementById('workout-section').style.display = "none";
});
// Toggle theme
const themeToggleBtn = document.getElementById('theme-toggle');
const body = document.body;
themeToggleBtn.addEventListener('click', () => {
body.classList.toggle('dark-mode');
const isDarkMode = body.classList.contains('dark-mode');
themeToggleBtn.textContent = isDarkMode ? 'Light Mode' : 'Dark Mode';
});
// Workout Plans Data
const workoutPlans = {
"morning": {
title: "Morning Workout",
description: "A quick workout to kickstart your day and energize you.",
exercises: [
{ name: "Jumping Jacks", detail: "3 minutes" },
{ name: "Push-ups", detail: "3 sets of 10" },
{ name: "Plank", detail: "1 minute" },
{ name: "High Knees", detail: "3 minutes" }
]
},
"daily": {
title: "Daily Workout",
description: "A well-rounded workout to do every day for general fitness.",
exercises: [
{ name: "Squats", detail: "3 sets of 15" },
{ name: "Lunges", detail: "3 sets of 12 per leg" },
{ name: "Push-ups", detail: "3 sets of 10" },
{ name: "Mountain Climbers", detail: "3 minutes" },
{ name: "Sit-ups", detail: "3 sets of 20" }
]
},
"sevenDays": {
title: "7 Days Workout",
description: "A weekly workout plan for balanced fitness across the entire week.",
exercises: [
{ name: "Monday", detail: "Full Body Strength Training" },
{ name: "Tuesday", detail: "Cardio and Core Workouts" },
{ name: "Wednesday", detail: "Yoga and Flexibility" },
{ name: "Thursday", detail: "Upper Body Strength" },
{ name: "Friday", detail: "Lower Body Strength" },
{ name: "Saturday", detail: "Cardio and HIIT" },
{ name: "Sunday", detail: "Rest and Recovery" }
]
}
};
function showWorkout(workoutType) {
const workout = workoutPlans[workoutType];
document.getElementById('workoutTitle').textContent = workout.title;
document.getElementById('workoutDescription').textContent = workout.description;
const exercisesList = document.getElementById('exercises');
exercisesList.innerHTML = "";
workout.exercises.forEach(function(exercise) {
const li = document.createElement('li');
li.textContent =
${exercise.name}: ${exercise.detail};
exercisesList.appendChild(li);
});
document.getElementById('workoutDetails').style.display = "block";
}
</script>
<!-- Footer -->
<footer class="footer">
<p>© 2025 Workout Buddy. All rights reserved.</p>
</footer>
</body>
</html>